<template>
	<view class="bgMinor2 pt-24 plr-24 pt-40 pb-40" :style="{ minHeight: `${windowHeight}px`, height: 'auto' }">
		<view class="shadowClass">
			<!-- radius-blr-15 -->
			<view class="bgMinor5">
				<!-- height-500 -->
				<view class="Flex">

					<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" height="500rpx"
						mode="heightFix"></uv-image>
				</view>

				<view class="bgWhite pt-40 pb-40  plr-22">
					<view class="flex">
						<view @click.stop="handleUse(0)" :class="{kuangClass2:dataInfo.onIndex === 0}"
							class="kuangClass cententClass tc plr-24 ptb-42">
							<view class="size-38 bold lineHeight1">季会员</view>
							<view class="numClass">{{dataInfo.quarter}}</view>
							<view class="size-24 color-black2">每天{{dataInfo.everyDay}}元</view>
						</view>

						<view @click.stop="handleUse(1)" :class="{kuangClass2:dataInfo.onIndex === 1}"
							class="kuangClass cententClass tc plr-24 ptb-42">
							<view class="size-38 bold lineHeight1">月会员</view>
							<view class="numClass">{{dataInfo.monthly}}</view>
							<view class="size-24 color-black2">每天{{dataInfo.everyDayTwo}}元</view>
						</view>
					</view>
					<view class="tc lineHeight1">
						<view class="mt-60 colorGradual size-38 weight-6">会员权益</view>
						<view class="mt-40 size-24">会员可以创建脉星人角色</view>
						<view class="mt-24 size-24">会员可以浏览脉星人板块</view>
						<view class="mt-24 size-24">会员可以上架自己的脉星人来获取收益</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="mtb-50 tc">
			<uv-checkbox-group v-model="checkboxValue" shape="circle" @change="changeBox" labelColor="#999999" labelSize="16rpx">
				<uv-checkbox :customStyle="{ marginBottom: '8px' }" key="1" label="同意《会员服务协议》和《自动续费服务协议》" :name="1"></uv-checkbox>
			</uv-checkbox-group>
		</view> -->
		<!-- <view class="mtb-50 tc" style="display: flex;">
			<uv-checkbox-group v-model="checkboxValue" shape="circle" @change="changeBox" labelColor="#999999" labelSize="16rpx">
				<uv-checkbox :customStyle="{ marginBottom: '8px' }" key="1" :name="1" >
					
				</uv-checkbox>
			</uv-checkbox-group>
			<span style="font-size: 19rpx;">
				同意
				<span   @click="addOpen('/pages/mine/privacy?name=8')">《会员服务协议》</span>
				 和<span  @click="addOpen('/pages/mine/privacy?name=9')">《自动续费服务协议》</span>
			</span>
		</view> -->

		<view class="agreement-container">
			<image class="check-icon"
				:src="dataInfo.isSelected ? '/static/images/copy-copy.png' : '/static/images/copy-copy2.png'"
				@click="toggleSelection"></image>
			<view>

				同意
				<span @click="addOpen('/pages/mine/privacy?name=8')" style="color:#007df5">《会员服务协议》</span>
				和<span @click="addOpen('/pages/mine/privacy?name=9')" style="color:#007df5">《自动续费服务协议》</span>
			</view>

		</view>

		<view class="">
			<!-- <view class="width100 height-90"></view> -->
			<!-- <view class="fixedClass plr-24"> -->
			<view class="list_b_btn" @click="confirmPayment">确认开通</view>
			<!-- </view> -->
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { getWindowHeight } from '@/pages/util/getHeight';
	import { onLoad } from '@dcloudio/uni-app';
	import { addOpen, loggedIn, addOpenTab } from '@/pages/util/hooks';
	import useLoginStore from '@/pinia-store/userInfoStore';
	import { get, post } from '@/utils/request';
	const useLogin = useLoginStore();
	const windowHeight = getWindowHeight();
	// console.log('useLoginuseLogin',useLogin);
	const checkboxValue = ref([]);
	/** @name 数据 */
	const dataInfo = reactive({
		onIndex: 0,
		monthly: 0,
		everyDay: 0,
		everyDayTwo: 0,
		quarter: 0,
		isSelected: false,
	});
	const toggleSelection = () => {
		dataInfo.isSelected = !dataInfo.isSelected;
	};
	onLoad((options : any) => {
		getMemberPrices()
	});

	/** @name 是否选中事件 */
	const changeBox = (e) => {
		console.log('eeeeeeee', e);
		if (e?.length > 0) {

		} else {

		}
	}
	const getMemberPrices = async () => {
		try {
			const response = await get<{
				code : number;
				result : any;
			}>('/aiContent/getMember');
			if (response.code == 200) {
				dataInfo.monthly = response.result.monthly

				dataInfo.quarter = response.result.quarter
				dataInfo.everyDay = (response.result.quarter / 90).toFixed(2)
				dataInfo.everyDayTwo = (response.result.monthly / 30).toFixed(2)
			}

		} catch (error) {
			console.error(error);
		}
	};
	const myIncomeFun = async () => {
		try {

			const response = await post<{
				createBy : Number;
				userId : String,
				imgUrl : any,
				price : any
			}>('/myIncome/add',
				{
					"createBy": "oG2gC7CcTA1KbCrhiKpuy-HZsj8Y",
					"userId": "1923218175748083714",
					"imgUrl": "http://182.92.87.91:5301/ai/preview/MYuqhaQfaUWY46e1516f6639626f367f44e94015dd44_1749373489561.jpg",
					"price": dataInfo.onIndex == 0 ? dataInfo.quarter : dataInfo.monthly
				});
			console.log('w diaoyong l ')
			sessionStorage.clear()
			// const response = await post<>('ai/myIncome/add',
		} catch (error) {
			console.error(error);
		}
	};

	const confirmPayment = async () => {
		console.log(dataInfo.isSelected)
		if (dataInfo.isSelected === false) {
			uni.showToast({
				title: "请先阅读并同意《会员服务协议》和《自动续费服务协议》",
				duration: 2000,
				icon: "none"
			});
			return; // 阻止继续执行后续代码
		} else {
			console.log('-----')
			myIncomeFun()
		}

		try {
			const type = dataInfo.onIndex
			var typea = ''
			var total = null
			if (type == 0) {
				total = dataInfo.quarter
				typea = 1
			} else {
				total = dataInfo.monthly
				typea = 1
			}
			const response = await post<{
				code : number;
				result : any;

			}>('/authentication/member', { type: type, total: total, });
			if (response.code == 200) {
				const response = await post<{
					totalFee : Number;
					body : String,
					typea : any
				}>('/wechatpay/createOrder', { totalFee: total, body: '图片', type: typea });
				console.log(response)
				await uni.requestPayment({
					appId: response.appId,
					nonceStr: response.nonceStr,
					package: response.package,
					paySign: response.paySign,
					signType: response.signType,
					timeStamp: response.timeStamp,
					success: (res) => {
						uni.showToast({
							title: "支付成功",
							duration: 3000,
							icon: "none",
						});

						uni.switchTab({
							url: `/mine`, // 目标页面路径（需在pages.json注册）
							success: () => console.log('跳转成功'),
							fail: (err) => console.error('跳转失败', err)
						})
					}

				})
			} else {

			}

		} catch (error) {
			console.error(error);
		}
	}


	/** @name 切换选中会员 */
	function handleUse(index : number) {
		console.log('handleUse', index);
		dataInfo.onIndex = index
	}
</script>

<style scoped lang="scss">
	.agreement-container {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #999;
		margin: 50rpx 0;
	}

	.check-icon {
		width: 27rpx;
		height: 27rpx;
		margin-right: 5px;
	}

	.agreement-text {
		font-size: 24rpx;

		text {
			color: #007aff;
		}
	}

	.release_btn {
		width: 100%;
		background: #007aff;
		color: #ffffff;
		text-align: center;
		padding: 20rpx 0;
		margin-top: 40rpx;
		border-radius: 8rpx;
		cursor: pointer;
	}

	/* 禁用状态按钮样式 */
	.disabled-btn {
		color: #9E9E9E;
		background: #F5F5F5;
		cursor: not-allowed;
	}

	:deep(.uv-checkbox-group--row) {
		//  模版
		justify-content: center;
	}

	:deep(.uv-checkbox) {
		margin-bottom: 0 !important;
	}

	.shadowClass {
		border-radius: 0 0 16rpx 16rpx;
	}

	.kuangClass {
		width: 320rpx;
		height: 282rpx;
		// border: 4rpx solid #cecece;
		border-radius: 16rpx;
		box-shadow: 0 0 8px #cecece;
	}

	.kuangClass2 {
		width: 320rpx;
		height: 282rpx;
		background-image: url('/static/images/biankuan.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		// background-size: contain;
		// background-size: 320rpx 282rpx;
	}

	.cententClass {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.numClass {
		font-size: 60rpx;
		font-weight: 700;
		line-height: 1;
		background: -webkit-linear-gradient(#ffc800, #ff0053); // , 100%,#ff5037 left top,
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	// 按钮
	.list_b_btn {
		// letter-spacing: 8rpx;
		background: -webkit-linear-gradient(left top, #ffc800, #ff0053, #ff5037); // , 100%,#ff5037 left top,
	}
</style>